<template>
  <div class="report-wrap">
    <div class="report-action">
      <el-button type="primary" :loading="printLoading" @click="printPage" v-if="isViewMode">
        <i class="fa fa-print"></i>
        打印
      </el-button>
      <el-button icon="el-icon-download" type="primary" :loading="printLoading" @click="exportDocx">
        导出
      </el-button>
    </div>
    <div :id="printId">
      <table class="table text-center">
        <tbody>
          <tr>
            <td class="border-0" colspan="6" data-font='{"sz": 16, "bold": true}'>
              <h4 class="report-title">《“民宿纾困贷”尽职调查情况表》</h4>
            </td>
          </tr>
        </tbody>
      </table>
      <table class="table table-bordered table-sm bg-white table-vertical-middle text-center">
        <colgroup>
          <col width="16%" />
          <col width="19%" />
          <col width="12%" />
          <col width="19%" />
          <col width="17%" />
          <col width="17%" />
        </colgroup>
        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            一、经营主体信息
            <el-button type="text" v-if="!isViewMode" class="py-0" @click="handlerEditRelated">
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td>主体名称</td>
          <td>{{ related.customer_name }}</td>
          <td>营业执照号</td>
          <td>{{ related.register_no }}</td>
          <td>组织类型</td>
          <td>{{ orgClassName }}</td>
        </tr>
        <tr>
          <td>经营地址</td>
          <td colspan="5" class="text-left pl-3">{{ related.address }}</td>
        </tr>
        <tr>
          <td>经营者姓名</td>
          <td>{{ related.corp_name }}</td>
          <td>身份证号</td>
          <td>{{ related.lender_idcard }}</td>
          <td>联系电话</td>
          <td>{{ related.mobile_no }}</td>
        </tr>
        <tr>
          <td>身份证地址</td>
          <td colspan="5" class="text-left pl-3">{{ related.cert_address }}</td>
        </tr>
        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            二、民宿经营信息
            <el-button type="text" v-if="!isViewMode" class="py-0" @click="handlerEditHotel">
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td>民宿位置</td>
          <td>{{ hotel.address }}</td>
          <td>民宿区域位置</td>
          <td>{{ enumAreaPosType[hotel.area_pos_type || ''] }}</td>

          <td>经营场所是否自有</td>
          <td>{{ enumBusPlaceType[hotel.bus_place_type || ''] }}</td>
        </tr>
        <tr>
          <td>周边自然景观资源</td>
          <td colspan="3" class="text-left">
            {{ enumLandResourceType[hotel.land_resource_type || ''] }}
          </td>
          <td>客房总数</td>
          <td>{{ hotel.house_total || '-' }} 间</td>
        </tr>
        <tr>
          <td>民宿经营期限</td>
          <td>{{ hotel.bussiness_months || '-' }} 月</td>
          <td>用工人数</td>
          <td>{{ hotel.emp_total || '-' }} 人</td>
          <td>近一年人工支出</td>
          <td>{{ hotel.emp_pay || '-' }} 万元</td>
        </tr>
        <tr>
          <td>占地面积</td>
          <td>{{ hotel.area_covered || '-' }} ㎡</td>
          <td>建筑面积</td>
          <td>{{ hotel.area_build }} ㎡</td>
          <td>年销售收入</td>
          <td>{{ hotel.sale_income || '-' }} 万元</td>
        </tr>
        <tr>
          <td>年经营成本</td>
          <td>{{ hotel.business_cost || '-' }} 万元</td>
          <td>每月月入住率</td>
          <td>{{ hotel.in_house_rate }} %</td>
          <td>每月平均客房定价</td>
          <td>{{ hotel.house_price }} 元</td>
        </tr>
        <tr>
          <td>内部环境照片</td>
          <td colspan="5">
            <div class="d-flex flex-wrap">
              <img
                v-for="(img, index) in inEnvImages"
                @click="handlePreview(inEnvImages, index)"
                class="attach-item-img m-2"
                :key="index"
                :src="img"
                alt="附件图片"
                height="100"
                width="100"
              />
            </div>
          </td>
        </tr>
        <tr>
          <td>外部环境照片</td>
          <td colspan="5">
            <div class="d-flex flex-wrap">
              <img
                v-for="(img, index) in outEnvImages"
                @click="handlePreview(outEnvImages, index)"
                class="attach-item-img m-2"
                :key="index"
                :src="img"
                alt="附件图片"
                height="100"
                width="100"
              />
            </div>
          </td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="5" class="text-left">
            {{ hotel.remark }}
          </td>
        </tr>
        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            三、资金需求
            <el-button type="text" v-if="!isViewMode" class="py-0" @click="handlerEditFunds">
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td>申请金额</td>
          <td>{{ related.apply_funds || '-' }} 万元</td>
          <td>贷款期限</td>
          <td>{{ related.months || '-' }} 月</td>
          <td>贷款用途</td>
          <td>{{ related.funds_use_dir || '-' }}</td>
        </tr>
        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            四、项目资金投入情况及资金来源情况
            <el-button type="text" v-if="!isViewMode" class="py-0" @click="handlerEditHotelFunds">
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td class="text-left" colspan="6">（一）、项目投入</td>
        </tr>
        <tr>
          <td>土地流转</td>
          <td>{{ hotel.land_cir || '-' }} 万元</td>
          <td>基础设施建设</td>
          <td>{{ hotel.base_buid || '-' }} 万元</td>
          <td>房屋建筑及装修</td>
          <td>{{ hotel.house_fix || '-' }} 万元</td>
        </tr>
        <tr>
          <td>运营资金投入</td>
          <td>{{ hotel.operate_funds || '-' }} 万元</td>
          <td>其它投入</td>
          <td colspan="3">{{ hotel.other_operate_funds || '-' }} 万元</td>
        </tr>
        <tr>
          <td class="text-left" colspan="6">（二）、资金来源</td>
        </tr>
        <tr>
          <td>自有资金</td>
          <td>{{ hotel.self_funds || '-' }} 万元</td>
          <td>银行借款</td>
          <td>{{ hotel.load_funds || '-' }} 万元</td>
          <td>其它借款</td>
          <td>{{ hotel.other_funds || '-' }} 万元</td>
        </tr>
        <tr>
          <td>项目扶持</td>
          <td>{{ hotel.project_support_funds || '-' }} 万元</td>
          <td>其它资金来源</td>
          <td colspan="3">{{ hotel.other_support_funds || '-' }} 万元</td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="5" class="text-left">{{ hotel.remark_input }}</td>
        </tr>
        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            五、个人/企业不动产信息
            <el-button type="text" v-if="!isViewMode" class="py-0" @click="handlerEditImmov">
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td>资产名称</td>
          <td colspan="2">资产地址</td>

          <td>权利人</td>
          <td>是否有证</td>
          <td>购买金额</td>
        </tr>
        <tr v-for="p of immov" :key="p.id">
          <td>{{ p.immov_name || '-' }}</td>
          <td colspan="2">{{ p.immov_address || '-' }}</td>

          <td>{{ p.own_person || '-' }}</td>
          <td>{{ +(p.is_cert || 0) === 1 ? '是' : '否' }}</td>
          <td>{{ p.buy_funds || '-' }} 万元</td>
        </tr>
        <tr>
          <td>资产价值</td>
          <td colspan="4">-</td>
          <td>{{ immovFunds || '-' }} 万元</td>
        </tr>
        <tr v-show="!immov.length">
          <td class="text-center p-3 text-muted" colspan="6">暂无数据</td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="5" class="text-left">{{ hotel.remark_immov }}</td>
        </tr>

        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            六、银行贷款情况
            <el-button type="text" v-if="!isViewMode" class="py-0" @click="handlerEditLoan">
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td>借款人姓名</td>
          <td>贷款银行</td>

          <td>贷款品种</td>
          <td>贷款期限</td>
          <td>信用状况</td>
          <td>贷款余额</td>
        </tr>
        <tr v-for="p of loanData" :key="p.id">
          <td>{{ p.loan_person || '-' }}</td>
          <td>{{ p.bank_name || '-' }}</td>

          <td>{{ p.loan_category || '-' }}</td>
          <td>{{ p.loan_period || '-' }}</td>
          <td>{{ p.credit_info || '-' }}</td>
          <td>{{ p.loan_left_funds || '-' }} 万元</td>
        </tr>
        <tr>
          <td>合计贷款余额</td>
          <td colspan="4">-</td>
          <td>{{ leftFunds }} 万元</td>
        </tr>
        <tr v-show="!loanData.length">
          <td class="text-center p-3 text-muted" colspan="6">暂无数据</td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="5" class="text-left">{{ hotel.remark_loan }}</td>
        </tr>

        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            七、经营主体股东及其家庭主要成员信息
            <el-button type="text" v-if="!isViewMode" class="py-0" @click="handlerEditPerson">
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td>姓名</td>
          <td>性别</td>
          <td>与贷款人关系</td>
          <td>证件号码</td>
          <td>联系电话</td>
          <td>职业</td>
        </tr>
        <tr v-for="p of personData" :key="p.id">
          <td>{{ p.person_name || '-' }}</td>
          <td>{{ p.sex || '-' }}</td>
          <td>{{ p.relate || '-' }}</td>
          <td>{{ p.id_card || '-' }}</td>
          <td>{{ p.mobile_no || '-' }}</td>
          <td>{{ p.occupation || '-' }}</td>
        </tr>
        <tr v-show="!personData.length">
          <td class="text-center p-3 text-muted" colspan="6">暂无数据</td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="5" class="text-left">{{ hotel.remark_person }}</td>
        </tr>
        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            八、用电信息
            <el-button type="text" v-if="!isViewMode" class="py-0" @click="handlerEditEle">
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td>电表户号</td>
          <td>{{ eleInfo.ele_no || '-' }}</td>
          <td>开户电话</td>
          <td>{{ eleInfo.mobile_no || '-' }}</td>
          <td>开户户名</td>
          <td>{{ eleInfo.account_no || '-' }}</td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="5" class="text-left">
            {{ hotel.remark_ele }}
          </td>
        </tr>
        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            九、经营历史/个人履历描述
            <el-button
              type="text"
              v-if="!isViewMode"
              class="py-0"
              @click="handlerEditHotelDetail('bus_history_des')"
            >
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="text-left">
            <div class="emp-line">{{ hotel.bus_history_des }}</div>
          </td>
        </tr>
        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            十、股权结构及经营情况描述
            <el-button
              type="text"
              v-if="!isViewMode"
              class="py-0"
              @click="handlerEditHotelDetail('stock_des')"
            >
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="text-left">
            <div class="emp-line">{{ hotel.stock_des }}</div>
          </td>
        </tr>
        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            十一、贷款目的和原因及申请额度的合理性描述分析
            <el-button
              type="text"
              v-if="!isViewMode"
              class="py-0"
              @click="handlerEditHotelDetail('loan_reason_des')"
            >
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="text-left">
            <div class="emp-line">{{ hotel.loan_reason_des }}</div>
          </td>
        </tr>
        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            十二、申请人财务情况
            <el-button type="text" v-if="!isViewMode" class="py-0" @click="handlerFinanceEdit()">
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td colspan="4">
            资产负债情况 时间：{{ $utils.dateFormat(financeInfo.ZFDATE, 'yyyy年MM月') }}
          </td>
          <td colspan="2">
            损益情况 时间：{{ $utils.dateFormat(financeInfo.SYDATE, 'yyyy年MM月') }}
          </td>
        </tr>
        <template v-for="(p, index) of financeData">
          <tr :key="index">
            <td>{{ p.label1 }}</td>
            <td>{{ financeInfo[p.prop1] }}</td>
            <td>{{ p.label2 }}</td>
            <td>{{ financeInfo[p.prop2] }}</td>
            <td>{{ p.label3 }}</td>
            <td>{{ financeInfo[p.prop3] }}</td>
          </tr>
        </template>
        <tr>
          <td>备注</td>
          <td colspan="5" class="text-left">
            {{ hotel.finance_remark }}
          </td>
        </tr>

        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            十三、还款能力分析
            <el-button
              type="text"
              v-if="!isViewMode"
              class="py-0"
              @click="handlerEditHotelDetail('return_des')"
            >
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="text-left">
            <div class="emp-line">{{ hotel.return_des }}</div>
          </td>
        </tr>
        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            十四、反担保措施
            <el-button
              type="text"
              v-if="!isViewMode"
              class="py-0"
              @click="handlerEditHotelDetail('gua_method_des')"
            >
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="text-left">
            <div class="emp-line">{{ hotel.gua_method_des }}</div>
          </td>
        </tr>
        <tr>
          <td class="text-left font-weight-bold" data-font-bold="true" colspan="6">
            十五、调查结论和意见
            <el-button
              type="text"
              v-if="!isViewMode"
              class="py-0"
              @click="handlerEditHotelDetail('invest_result')"
            >
              <i class="fa fa-edit"></i>
            </el-button>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="text-left">
            <div class="emp-line">{{ hotel.invest_result }}</div>
          </td>
        </tr>
      </table>
    </div>
    <related-edit
      :visible.sync="relatedEditVisible"
      :table-id="queryId"
      :form-data="{ ...related }"
      @success="getRelated()"
    ></related-edit>
    <hotel-edit
      :visible.sync="hotelEditVisible"
      :form-data="{ ...hotel }"
      :query-id="queryId"
      @success="getHotel()"
    ></hotel-edit>
    <funds-demand
      :visible.sync="fundsEditVisible"
      :table-id="queryId"
      :form-data="{ ...related }"
      @success="getRelated()"
    ></funds-demand>
    <hotel-funds-edit
      :visible.sync="hotelFundsVisible"
      :form-data="{ ...hotel }"
      @success="getHotel()"
    ></hotel-funds-edit>

    <immov-edit
      :visible.sync="immovEditVisible"
      :query-id="queryId"
      @success="getImmov()"
      @getRemark="getHotel()"
      :form-data="immov"
      :hotel-data="{ ...hotel }"
    ></immov-edit>

    <loan-edit
      :visible.sync="loanEditVisible"
      :query-id="queryId"
      @success="getLoanData()"
      @getRemark="getHotel()"
      :form-data="loanData"
      :hotel-data="{ ...hotel }"
    ></loan-edit>

    <person-edit
      :visible.sync="personEditVisible"
      :query-id="queryId"
      @success="getPerson()"
      @getRemark="getHotel()"
      :form-data="personData"
      :hotel-data="{ ...hotel }"
    ></person-edit>
    <ele-edit
      :visible.sync="eleEditVisible"
      :hotel-data="{ ...hotel }"
      :form-data="{ ...eleInfo }"
      @success="getEle()"
      @getRemark="getHotel()"
    ></ele-edit>
    <hotel-detail-edit
      :hotel-data="{ ...hotel }"
      :visible.sync="hotelDetailVisible"
      :submit-key="submitKey"
      @success="getHotel()"
    ></hotel-detail-edit>
    <finance-edit
      :visible.sync="financeEditVisible"
      :query-id="queryId"
      :hotel-data="{ ...hotel }"
      :form-data="{ ...financeInfo }"
      @success="getFinance()"
      @getRemark="getHotel()"
    ></finance-edit>
  </div>
</template>

<script>
import RelatedEdit from '@/bigcredit/views/program/components/report/RelatedEdit'
import {
  enumAreaPosType,
  enumBusPlaceType,
  enumLandResourceType,
} from '@/bigcredit/views/program/components/apply/ApplyTable'
import HotelEdit from '@/bigcredit/views/program/components/report/HotelEdit'
import FundsDemand from '@/bigcredit/views/program/components/report/FundsDemand'
import HotelFundsEdit from '@/bigcredit/views/program/components/report/HotelFundsEdit'
import ImmovEdit from '@/bigcredit/views/program/components/report/ImmovEdit'
import LoanEdit from '@/bigcredit/views/program/components/report/LoanEdit'
import { arrayFromString, add, printA4, docxTemplateExport } from '@vimi/utils-tool'
import PersonEdit from '@/bigcredit/views/program/components/report/PersonEdit'
import EleEdit from '@/bigcredit/views/program/components/report/EleEdit'
import HotelDetailEdit from '@/bigcredit/views/program/components/report/HotelDetailEdit'
import FinanceEdit from '@/bigcredit/views/program/components/report/FinanceEdit'

export const financeData = [
  {
    label1: '货币资金',
    prop1: 'HBZJ',
    label2: '银行借款',
    prop2: 'YXJK',
    label3: '销售收入',
    prop3: 'XSSR',
  },
  {
    label1: '应收',
    prop1: 'YS',
    label2: '应付账款',
    prop2: 'YFUZK',
    label3: '销售成本',
    prop3: 'XSCB',
  },
  {
    label1: '预付账款',
    prop1: 'YFZK',
    label2: '预收账款',
    prop2: 'YSZK',
    label3: '销售毛利',
    prop3: 'XSML',
  },
  {
    label1: '存货',
    prop1: 'CH',
    label2: '其他负债',
    prop2: 'QTFZ',
    label3: '费用',
    prop3: 'FY',
  },
  {
    label1: '固定资产',
    prop1: 'GDZC',
    label2: '总负债',
    prop2: 'ZFZ',
    label3: '净利润',
    prop3: 'JLR',
  },
  {
    label1: '其它经营性资产',
    prop1: 'QTJYXZC',
    label2: '权益',
    prop2: 'QY',
    label3: '家庭开支',
    prop3: 'JTKZ',
  },
  {
    label1: '总资产',
    prop1: 'ZZC',
    label2: '负债及权益',
    prop2: 'FZJQY',
    label3: '月可支配收入',
    prop3: 'YKZPSR',
  },
  {
    label1: '资产负债率%',
    prop1: 'ZCFZL',
    label2: '流动比率%',
    prop2: 'LDBL',
    label3: '速动比率%',
    prop3: 'SDBL',
  },
]
export default {
  components: {
    RelatedEdit,
    HotelEdit,
    FundsDemand,
    HotelFundsEdit,
    ImmovEdit,
    LoanEdit,
    PersonEdit,
    EleEdit,
    HotelDetailEdit,
    FinanceEdit,
  },
  props: {
    queryId: String,
    viewMode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      financeData,
      enumAreaPosType,
      enumBusPlaceType,
      enumLandResourceType,
      loading: false,
      related: {},
      relatedTable: 'customer_related',

      hotel: {},
      hotelTable: 'credit_industrial_hotel_invest',

      immov: [],
      immovTable: 'credit_industrial_immov',

      loanData: [],
      loanTable: 'credit_industrial_loan',

      personData: [],
      personTable: 'credit_industrial_person',

      eleInfo: {},
      eleTable: 'credit_industrial_ele',

      financeInfo: {},
      financeTable: 'finance_info',

      relatedEditVisible: false,
      hotelEditVisible: false,
      fundsEditVisible: false,
      hotelFundsVisible: false,
      immovEditVisible: false,
      loanEditVisible: false,
      personEditVisible: false,
      eleEditVisible: false,
      hotelDetailVisible: false,
      submitKey: '',

      financeEditVisible: false,
      printLoading: false,
    }
  },
  computed: {
    isViewMode() {
      return this.viewMode
    },
    inEnvImages() {
      return arrayFromString(this.hotel.attachment_inner)
    },
    outEnvImages() {
      return arrayFromString(this.hotel.attachment_outer)
    },
    enumOrgClass() {
      return this.$store.getters.enumOrgClassObj
    },
    orgClassName() {
      return this.enumOrgClass[this.related.org_class] || ''
    },
    printId() {
      return `${this.queryId}-invest-report`
    },
    immovFunds() {
      let funds = 0
      this.immov.forEach(item => {
        funds = add(funds, item.buy_funds)
      })
      return funds
    },
    leftFunds() {
      let funds = 0
      this.loanData.forEach(item => {
        funds = add(funds, item.loan_left_funds)
      })
      return funds
    },
  },
  watch: {
    queryId: {
      handler: function () {
        if (!this.queryId) {
          return
        }
        this.getData()
      },
      immediate: true,
    },
  },
  created() {
    this.$store.dispatch('getEnumOrgClass')
  },
  mounted() {},
  methods: {
    handlePreview(images, index) {
      this.$utils.viewer({
        images: images,
        index,
      })
    },
    handlerEditRelated() {
      this.relatedEditVisible = true
    },
    handlerEditHotel() {
      this.hotelEditVisible = true
    },
    handlerEditFunds() {
      this.fundsEditVisible = true
    },
    handlerEditHotelFunds() {
      this.hotelFundsVisible = true
    },
    handlerEditImmov() {
      this.immovEditVisible = true
    },
    handlerEditLoan() {
      this.loanEditVisible = true
    },
    handlerEditPerson() {
      this.personEditVisible = true
    },
    handlerEditEle() {
      this.eleEditVisible = true
    },
    handlerEditHotelDetail(key = '') {
      this.submitKey = key
      this.hotelDetailVisible = true
    },
    handlerFinanceEdit() {
      this.financeEditVisible = true
    },
    getData() {
      this.loading = true
      Promise.all([
        this.getRelated(),
        this.getHotel(),
        this.getImmov(),
        this.getLoanData(),
        this.getPerson(),
        this.getEle(),
        this.getFinance(),
      ]).finally(() => {
        this.loading = false
      })
    },
    getRelated() {
      return this.$api
        .getDataFromId(this.$serviceName, this.relatedTable, this.queryId)
        .then(res => {
          this.related = res?.data ?? {}
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '请求失败，请重试！')
        })
    },
    getHotel() {
      return this.$api
        .getData(this.$serviceName, this.hotelTable, {
          'customer_related_id.eq': this.queryId,
        })
        .then(res => {
          this.hotel = res?.data?.[0] ?? {}
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '请求失败，请重试！')
        })
    },
    getImmov() {
      return this.$api
        .getData(this.$serviceName, this.immovTable, {
          'customer_related_id.eq': this.queryId,
        })
        .then(res => {
          this.immov = res?.data ?? []
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '请求失败，请重试！')
        })
    },
    getLoanData() {
      return this.$api
        .getData(this.$serviceName, this.loanTable, {
          'customer_related_id.eq': this.queryId,
        })
        .then(res => {
          this.loanData = res?.data ?? []
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '请求失败，请重试！')
        })
    },

    getPerson() {
      return this.$api
        .getData(this.$serviceName, this.personTable, {
          'customer_related_id.eq': this.queryId,
        })
        .then(res => {
          this.personData = res?.data ?? []
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '请求失败，请重试！')
        })
    },

    getEle() {
      return this.$api
        .getData(this.$serviceName, this.eleTable, {
          'customer_related_id.eq': this.queryId,
        })
        .then(res => {
          this.eleInfo = res?.data?.[0] ?? {}
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '请求失败，请重试！')
        })
    },
    getFinance() {
      return this.$api
        .getData(this.$serviceName, this.financeTable, {
          'customer_related_id.eq': this.queryId,
        })
        .then(res => {
          this.financeInfo = res?.data?.[0] ?? {}
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '请求失败，请重试！')
        })
    },
    printPage() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
    .report-title {text-align: center;margin-bottom: 1rem;font-weight: bold;font-size: 1.5rem;line-height: 1.5;}
    .table-bordered td {border-color: #333 !important;padding: 0.25rem;text-align: center;vertical-align: middle;}
    .rating-level {font-size: 4rem; font-weight: bold;color: var(--primary);
}
  `
      )
    },
    async exportDocx() {
      this.loading = true
      const fileName = `尽职调查情况表-${this.related.customer_name}`
      const templaterUrl = '/credit/files/尽职调查情况表.docx'
      const tags = {
        related: { ...this.related, orgClassName: this.orgClassName },
        hotel: {
          ...this.hotel,
          areaPosType: enumAreaPosType[this.hotel.area_pos_type || ''],
          busPlaceType: enumBusPlaceType[this.hotel.bus_place_type || ''],
          landResourceType: enumLandResourceType[this.hotel.land_resource_type || ''],
          immovFunds: this.immovFunds, // 统计数
          leftFunds: this.leftFunds,
        },
        immov: this.immov.map(item => {
          return { ...item, is_cert: +item.is_cert === 1 }
        }),
        loanData: this.loanData,
        personData: this.personData,
        eleInfo: this.eleInfo,
        financeInfo: {
          ...this.financeInfo,
          ZFDATE: this.$utils.dateFormat(this.financeInfo.ZFDATE, 'yyyy年MM月'),
          SYDATE: this.$utils.dateFormat(this.financeInfo.SYDATE, 'yyyy年MM月'),
        },
        inEnvImages: this.inEnvImages,
        outEnvImages: this.outEnvImages,
      }
      docxTemplateExport({
        templaterUrl,
        tags,
        fileName,
      })
        .then(() => {
          this.$message.success('导出成功')
        })
        .catch(err => {
          this.$message.error('导出失败')
          throw new Error(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
$report-width: 100%;
$report-input-border-color: #333;
.table-vertical-middle td {
  vertical-align: middle;
}
.report-wrap {
  width: $report-width;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid #e9ecef;
  border-radius: 2px;
  background-color: #fff;

  .report-title {
    text-align: center;
    margin-bottom: 1rem;
    font-weight: bold;
    font-size: 1.45rem;
  }
}
.report-action {
  width: $report-width;
  margin: 0 auto 0.5rem auto;
  text-align: right;
}

.table-bordered td {
  border: 1px solid;
  border-color: #333;
  padding: 0.25rem;
  text-align: center;
  vertical-align: middle;

  &.report-input-last-td {
    border-right-color: $report-input-border-color;
  }

  &.report-input-td {
    border-color: $report-input-border-color;
    background-color: #ffffee;
    padding: 0;

    .form-control {
      border: none;
      background-color: #ffffee;
      padding: 0.25rem;
    }
  }
}
.attach-item-img {
  border-radius: 2px;
  z-index: 1;
  cursor: pointer;
}

.emp-line {
  min-height: 4rem;
}
</style>
